<template>
  <div class="setting-org">
    <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList}" print>
      <template v-slot:buttons>
        <el-button type="primary" size="small" icon="el-icon-plus" @click="openDialog('', 1, false)">新增</el-button>
      </template>
    <!-- <template v-slot:tools>1</template> -->
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      highlight-hover-row
      :loading="loading"
      :auto-resize="true"
      :data="tabData"
      width
      max-height="500"
      row-id="id"
      :print-config="{}"
      header-align="center"
    >
      <vxe-table-column type="seq" align="center" width="50" title=" " />
      <vxe-table-column field="code" width="200" title="职位代码" />
      <vxe-table-column field="name" width="200" title="职位名称" />
      <vxe-table-column field="levelName" width="120" title="职位等级" />
      <vxe-table-column field="remarks" min-width="250" title="备注" />
      <vxe-table-column title="状态" width="80" align="center" slots="default">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.publishStatus" :inactive-value="0" :active-value="1" active-text inactive-text @change="changeState(scope)" />
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" fixed="right" align="center" width="140" slots="default">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="openDialog(scope.row.id, 2, true)">查看</el-button>
          <el-button v-if="scope.row.publishStatus != 1" type="text" size="mini" @click="openDialog(scope.row.id, 2, false)">编辑</el-button>
          <el-button v-if="scope.row.publishStatus != 1" type="text" size="mini" @click="delInfo(scope.row.id)">删除</el-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <el-dialog width="40%" v-if="dialogFormVisible" title="信息编辑" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" :model="params" label-width="7rem" :rules="rules">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="职位代码：" prop="code">
              <el-input v-model="params.code" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位名称：" prop="name">
              <el-input v-model="params.name" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位等级：" prop="level">
              <el-select v-model="params.level" :disabled="disabled">
                <el-option v-for="item in jobLevelList " :key="item.name" :value="item.code" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="顺序号：" prop="sort">
              <el-input v-model="params.sort" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input v-model="params.remarks" :disabled="disabled" type="textarea" :rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="!disabled"  type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { jobLevelList, addJob, modifyJob, delJob, viewJob, getJobList, changeJobStatus } from '@/api/org/orgSetting'
export default {
  data() {
    return {
      params: {
        code: '',
        name: '',
        level: 1,
        sort: 99,
        remark: ''
      },
      queryParams: {
        code: '',
        name: ''
      },
      jobLevelList: [],
      tabData: [],
      dialogFormVisible: false,
      loading: false,
      disabled: false,
      rules: {
        code: [{ required: true, message: '请输入职位代码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入职位名称', trigger: 'blur' }],
        level: [{ required: true, message: '请输入职位等级', trigger: 'blur' }]
      },
      type: 1 ,// 1 添加 2修改
      operationType: 0, // 0 添加 1 注册
    }
  },
  created() {
    this.getList()
    this.getJobLevelList()
  },
  methods: {
    getJobLevelList() {
      jobLevelList({}).then(res => {
        this.jobLevelList = res
      })
    },
    changeState(scope) {
      this.tabData[scope.seq - 1].publishStatus = scope.row.publishStatus === 1 ? 0 : 1
      changeJobStatus({
        id: scope.row.id,
        status: scope.row.publishStatus === 1 ? 0 : 1
      }).then(response => {
        this.tabData[scope.seq - 1].publishStatus = scope.row.publishStatus === 1 ? 0 : 1
        this.$message.success(scope.row.publishStatus === 0 ? '禁用成功' : '启用成功')
      })
    },
    openDialog(id, type, bool) {
      this.disabled = bool
      this.operationType = type
      if (type === 2) {
        viewJob({ id }).then(response => {
          this.params = response
          this.dialogFormVisible = true
        })
      } else {
        this.params = {}
        this.params.sort=99
        this.dialogFormVisible = true
      }
    },
    getList() {
      getJobList(this.queryParams).then(response => {
        this.tabData = response
      })
    },
    delInfo(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delJob(id).then(response => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.operationType === 1) {
            addJob(this.params).then(response => {
              this.$message.success('添加成功')
              this.dialogFormVisible = false
              this.getList()
            })
          } else {
            modifyJob(this.params).then(response => {
              this.$message.success('编辑成功')
              this.dialogFormVisible = false
              this.getList()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .setting-org {
    background: #fff;
    padding: 20px;
    border-radius: 3px;
    .save-button {
      position: fixed;
      right: 80px;
      top: 95px;
    }
    .redLabel {
      .el-form-item__label:before {
        content: "*";
        color: #ff4949;
        margin-right: 4px;
      }
    }
    .iconImg {
      width: 50px;
      height: 50px;
    }
  }
  .load-cont{
    .el-upload--picture-card{
      width: 100px;
      height: 100px;
      line-height:100px
    }
    .el-upload-list__item{
      width:100px;
      height: 100px;
    }
  }
</style>
